.c-crop {
  img {
    @extend %event-none;
  }
  @at-root {
    .c-crop--main {
      @extend %wp100; // height:460px;
      @extend %tc;
    }
    .c-crop--area {
      @extend %pr;
      @extend %hp100;
      @extend %inline-b;
      &:after {
        content: '';
        @extend %pa;
        @extend %wh100;
        background: rgba(0, 0, 0, 0.4);
        z-index: nth($zindex, 1);
        top: 0;
        left: 0;
      }
    }
    .c-crop--cut {
      @extend %pa;
      @extend %of;
      z-index: nth($zindex, 2);
    }
    .c-crop--cut_img {
      @extend %pa;
    }
    .drap-resize_main {
      @extend %event-none;
    }
  }
}

//拖拽的框
.c-crop--drap {
  $cropWidth: 6px;
  $corpHalfWidth: 3px;
  @extend %pa;
  top: 0;
  left: 0;
  z-index: nth($zindex, 1);
  @extend %event-none;
  @extend %wh100;
  border: 3px solid rgba(0, 0, 0, 0.4);
  .line {
    @extend %pa;
    @extend %event-auto;
    &:after {
      content: '';
      @extend %pa;
      background: #fff url(../Jcrop.gif);
      ;
    }
  }
  @at-root {
    .c-crop--drap_screen {
      @extend %wh100;
      @extend %event-auto;
    }
    .c-crop--drap_main {
      @extend %pr;
      @extend %wh100;
    }
    .c-crop--drap_nline {
      top: 0;
      left: 0;
      @extend %wp100;
      height: 5px;
      &:after {
        top: -1px;
        height: 1px;
        @extend %wp100;
        left: 0;
      }
    }
    .c-crop--drap_eline {
      top: 0;
      right: 0;
      @extend %hp100;
      width: 5px;
      &:after {
        right: -1px;
        width: 1px;
        @extend %hp100;
        top: 0;
      }
    }
    .c-crop--drap_sline {
      bottom: 0;
      left: 0;
      @extend %wp100;
      height: 5px;
      &:after {
        @extend %wp100;
        bottom: -1px;
        left: 0;
        height: 1px;
      }
    }
    .c-crop--drap_wline {
      top: 0;
      left: 0;
      @extend %hp100;
      width: 5px;
      &:after {
        left: -1px;
        width: 1px;
        @extend %hp100;
        top: 0;
      }
    }
    .c-crop--drap_n,
    .c-crop--drap_e,
    .c-crop--drap_w,
    .c-crop--drap_s,
    .c-crop--drap_ne,
    .c-crop--drap_nw,
    .c-crop--drap_se,
    .c-crop--drap_sw {
      width: $cropWidth;
      height: $cropWidth;
      background-color: #333;
      border: 1px #EEE solid;
      position: absolute;
      z-index: nth($zindex, 2);
    }
    .c-crop--drap_n,
    .c-crop--drap_s {
      left: 50%;
      margin-left: -$corpHalfWidth;
    }
    .c-crop--drap_w,
    .c-crop--drap_e {
      top: 50%;
      margin-top: -$corpHalfWidth;
    }
    .c-crop--drap_n,
    .c-crop--drap_s,
    .c-crop--drap_nline,
    .c-crop--drap_sline {
      cursor: ns-resize;
    }
    .c-crop--drap_w,
    .c-crop--drap_e,
    .c-crop--drap_wline,
    .c-crop--drap_eline {
      cursor: ew-resize;
    }
    .c-crop--drap_n {
      top: -$corpHalfWidth;
    }
    .c-crop--drap_e {
      right: -$corpHalfWidth;
    }
    .c-crop--drap_s {
      bottom: -$corpHalfWidth;
    }
    .c-crop--drap_w {
      left: -$corpHalfWidth;
    }
    .c-crop--drap_ne {
      right: -$corpHalfWidth;
      top: -$corpHalfWidth;
      cursor: nesw-resize;
      @extend %event-auto;
    }
    .c-crop--drap_nw {
      left: -$corpHalfWidth;
      top: -$corpHalfWidth;
      cursor: nwse-resize;
      @extend %event-auto;
    }
    .c-crop--drap_se {
      right: -$corpHalfWidth;
      bottom: -$corpHalfWidth;
      cursor: nwse-resize;
      @extend %event-auto;
    }
    .c-crop--drap_sw {
      left: -$corpHalfWidth;
      bottom: -$corpHalfWidth;
      cursor: nesw-resize;
      @extend %event-auto;
    }
  }
}

.c-dropDown {
  padding: 10px;
  @at-root {
    .c-dropDown--list {
      background-color: #fff;
      width: 140px;
      border-radius: 6px;
      border: 1px solid #fff;
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
    }
    .c-dropDown-item {
      color: #434343;
      height: 36px;
      cursor: pointer;
      text-align: left;
      display: block;
      padding-left: 12px;
      font-size: 13px;
      &:hover {
        background: #f1f3f4;
      }
      i.fa {
        line-height: 24px;
      }
      span {
        display: inline-block;
        height: 36px;
        line-height: 36px;
        padding-left: 8px;
      }
    }
  }
}

.c-cover {
  border-radius: 4px;
  height: 180px;
  width: 180px;
  background: #ccc;
  position: relative;
  cursor:pointer;
  @at-root {
    .c-cover--btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      background: rgba(0, 0, 0, 0.6);
      text-align: center;
      color: #fff;
    }
  }
}

.c-list1{
  @at-root{
    .c-list1--row{
      position: relative;
      height: 30px;
      line-height: 30px;
      background-color: #fff;
      padding-left:10px;
      padding-right:10px;
      &:nth-child(odd){
        background-color: #f9f9f9; 
      }
    }
    .c-list1--layout{
      position: absolute;
      right:10px;
      top:0;
    }
    
  }
}
.c-font--default{
  color:#ccc;
  font-size: 16px;
  cursor: pointer;
}